

    body>.bottomBg{
        background:#fb0;
    }
    body>.bottomBg .box .son .colorBlock{
        background-color:#393; 
    } 
    .animateBottle.big{
        top: 45vw;
        left:53vw;
        transition: transform 1.5s cubic-bezier(0.26, 0.01, 0.14, 1);
        transform: translate3d(0px,0px,0px) rotate(25deg);
    }
    @media(min-width:1025px){
        .animateBottle.big{
            top:300px;
        }
    }
    .shave,
    main .palace,
    header .menu::before{
        background:#fb0;
    }
    
    header .menu .menuBtn i{
        background: #333081;
    }
  
    header .menu ul li{
        color: #333081;
    }
    .mobileDevice main{
        overflow: hidden;
    }
    .mainHead{
        margin-top:70px;
        position: relative;
        
    }
    header .menu ul .line span,
    .mainHead .content{
        background: #333081;
    }
    .mainHead .title .txt h1{
        color: #333081;
    }
    .mainHead .title .bg{
        background-image: url(../../img/common/sawtooth.png);
    }
    
    
    .mainHead .content .float{
        position: absolute;
        bottom: 0px;
        width: 100%;
        height: 0px;
    }
    .w-25pct{
        width: 25%;
    }
    .w-50pct{
        width: 50%;
    }
    .mainHead .content .float img{
        position: absolute;
        max-width: 100%;
        height: auto;
    }
    .mainHead .content .float .left_1{
        left: -60%;
        top: -20vh;
        z-index: 2;
    }
    .mainHead .content .float .left_2{
        left: -40%;
        top:-20vh;
    }
    .mainHead .content .float .right{
        right: -10%;
    }

    main .goods .item{
        text-align:center;
        position: relative;
        color: white;
        margin-top: 500px;
    }
    main .goods .item .content{
        width: 100%;
    }
    main .goods .item .content>*{
        position: relative;
        z-index: 3;
    }
    main .goods .item .content img{
        display: block;
        margin:0px auto;
        padding-top: 30px;
    }
    main .goods .item .content h1{
        font-size: 50px;
        letter-spacing: 10px;
        margin-top: 55px;
    }
    main .goods .item .content p{
        margin:0px auto;
        margin-top:60px;
        font-size: 14px;
    }
    main .goods .item .box{
        transform:scale(0);
        transition:all ease .5s;
        position:absolute;
        top:0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }
    main .goods .item .box .rotate{
        height: 100%;
        animation: items 12s linear infinite;
        animation-name:rotateItems ;
        animation-duration: 12s;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    main .goods .item:nth-child(2) .box .rotate{
        animation-direction: reverse;
    }

    @keyframes rotateItems{
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(360deg);
        }
    }
    main .goods .item .rotate p{
        position: absolute;
        width:197px;
        height: 197px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        top:0px;
        margin: auto;
        transform-origin: center center;
    }
    main .goods .item .rotate p:nth-child(1){
        transform:translate(0,-360px);
    }
    main .goods .item .rotate p:nth-child(2){
        transform:rotate(45deg) translate(0,-360px);
    }
    main .goods .item .rotate p:nth-child(3){
        transform:rotate(90deg) translate(0px,-360px);
    }
    main .goods .item .rotate p:nth-child(4){
        transform:rotate(135deg) translate(0,-360px);
    }
    main .goods .item .rotate p:nth-child(5){
        transform:rotate(180deg) translate(0,-360px);
    }
    main .goods .item .rotate p:nth-child(6){
        transform:rotate(225deg) translate(0,-360px);
    }
    main .goods .item .rotate p:nth-child(7){
        transform:rotate(270deg) translate(0,-360px);
    }
    main .goods .item .rotate p:nth-child(8){
        transform:rotate(315deg) translate(0,-360px);
    }
    main .goods .item .rotate p img{
        display: block;
        position: absolute;
        left: 0px;
        right: 0px;
        top: 0px;
        bottom: 0px;
        margin: auto;
        width: auto;
        height: 100%;
    }
    main .goods .item .rotate p img:first-child{
        animation: bg 6s linear infinite;
    }
    main .goods .item:nth-child(2) .rotate p img:first-child{
        animation: def_bg 6s linear infinite;
    }
    main .goods .item .rotate p img.beer{
        width: auto;
        opacity: .8;
        animation: bottle 3s linear infinite;
    }
    main .goods .item:nth-child(2) .rotate p img.beer{
        animation: def_bottle 3s linear infinite;
    }
    @keyframes bg{
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(360deg);
        }
    }
    @keyframes def_bg{
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(-360deg);
        }
    }
    @keyframes bottle{
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(360deg);
        }
    }
    @keyframes def_bottle{
        from{
            transform: rotate(0deg);
        }to{
            transform: rotate(-360deg);
        }
    }
    main .goods .item.red{
        background: #dd0000;
    }
    main .goods .item.blue{
        background:#333081;
    }
    main .goods .item.green{
        background:#393;
        margin-bottom: 280px;
    }

    main .moveLoop{
        padding:0px 20px;
    }
    main .moveLoop ul{
        border-top: 1px solid #000;
    }
    main .moveLoop li{
        border-bottom: 1px solid black;
    }
    main .moveLoop li .info{
        text-align: center;
    }
    main .moveLoop li .info .title{
        padding-top:30px;
        position: relative;
        padding-bottom: 10px;
        box-sizing: content-box;
        height: 200px;
    }
    main .moveLoop li .info .title h1{
        width: 100%;
        color: #333081;
        font-size: 120px;
        line-height: 120px;
        position: absolute;
        top:50%;
        transform: translateY(-50%);
        letter-spacing: 10px;
    }
    main .moveLoop li .info .title img{
        display: block;
        margin: 0px auto;
        position: relative;
        z-index: 2;
        height: 200px;
        width: auto;
    }
    main .moveLoop li .info p{
        margin: 0px auto;
        padding-bottom: 32px;
        font-size: 14px;
        line-height: 180%;
        max-width: 600px;
    }
    main .moveLoop li .box{
        max-height:0px;
        overflow: hidden;
        transition: all ease 1s;
    }
    main .moveLoop li.active .box{
        max-height: 400px;
    }
    main .moveLoop li .moveBottle{
        height: 70px;
        overflow: hidden;
    }
    main .moveLoop li .moveBottle .roll{
        white-space: nowrap;
        overflow: hidden;
        height: 100%;
        width: 240%;
    }
    main .moveLoop li .moveBottle p{
        position: relative;
        width: 50%;
        display: flex;
        float: left;
        overflow: hidden;
        top: 50%;
        transform: translateY(-50%);
    }
    main .moveLoop li .moveBottle p span{
        display: block;
        flex-shrink: 0;
        width: 28%;
        animation-name: moveBottle;
        animation-duration: 4s;
        animation-timing-function: linear;
        animation-fill-mode: forwards;
        animation-iteration-count: infinite;

    }
    main .moveLoop li .moveBottle .right p span{
        animation-direction: reverse;
    }
    @keyframes moveBottle{
        to{
            transform: translateX(-100%);
        }
    }
    main .moveLoop li .moveBottle p span img{
        display: block;
    }
    main .moveLoop li.active .moveBottle{
        height: 0px;
    }
    main .moveLoop li .moveBottle.unhover{
        opacity: .5;
    }
    main .news{
        overflow: hidden;
        margin-top: 32px;
        padding-bottom: 48px;
        position: relative;
    }
    main .news .bottomBg{
        position: absolute;
        top: 0px;
        bottom: 48px;
        left: 50%;
        right: 10%;
        margin: auto;
        background-image: url(../../img/index/newsbg.jpg);
        background-size: 100%;
    }
    main .news .newsSwiper{
        padding: 150px 0px;
        overflow: initial;
    }
    main .news .newsSwiper .swiper-slide{
        width: 70%;
        margin-right: 10%;
    }

    main .news .newsSwiper .swiper-slide:first-child{
        margin-left: 15%;
    }
    main .news .newsSwiper .swiper-slide:last-child{
        margin-right: 15%;
    }
    main .news .newsSwiper .swiper-slide .info{
        position: relative;
        z-index: 5;
        opacity: 0;
        transform: translateY(20px);
        transition:opacity ease 1s,transform ease 1s;
        transition-delay: .2s;
    }
    main .news .newsSwiper .swiper-slide.inview .info{
        opacity: 1;
        transform: translateY(0px);
        margin-top: -20px;
    }
    main .news .newsSwiper .swiper-slide .info h1{
        font-size: 51px;
        font-weight: bold;
        color: red;
        text-align: center;
        margin-bottom: 55px;
    }
    main .news .newsSwiper .swiper-slide .info p{
        font-size: 12px;
        line-height: 25px;
        text-align: center;
    }
    main .news .newsSwiper .swiper-slide .pic{
        opacity: 0;
        transform: translateY(20px);
        transition:opacity ease 1s,transform ease 1s;
    }
    main .news .newsSwiper .swiper-slide.inview .pic{
        opacity: 1;
        transform: translateY(0px);
    }
    main .news .newsSwiper .swiper-slide .pic .box{
        padding-bottom: 100%;
        position: relative;
    }
    main .news .newsSwiper .swiper-slide .pic .box img{
        width: 100%;
        height: 100%;
        object-fit: cover;
        position: absolute;
    }
    main .news .newsSwiper .swiper-slide .pic .rollBox{
        height: 55px;
        white-space: nowrap;
        max-width: 240px;
        font-size: 14px;
        color: #e22a1b;
        font-weight: bold;
        letter-spacing: 3px;
        left: 50%;
        position: absolute;
        top:50%;
        transform: translate(-50%,-50%);
        background:#fff;
        overflow: hidden;
        line-height: 55px;
        display: none;
        z-index: 2;
    }
    .mobileDevice main .news .newsSwiper .swiper-slide .pic .rollBox{
        display: block;
    }
    main .news .newsSwiper .swiper-slide:hover .pic .rollBox{
        display: block;
    }
    main .news .newsSwiper .swiper-slide .pic .rollBox p{
        animation:slide 20s infinite linear forwards;
    }
    .cursorBox .followCursor{
        width: 100px;
        height: 100px;
        opacity: 0;
        left: -50px;
        top: -50px;
        border: 1px solid #dd0000;
        border-radius: 50%;
        z-index: 10;
        position: absolute;
        pointer-events: none;
        transition: opacity .3s linear,transform ease-out .3s;
    }
    .cursorBox .followCursor.visible{
        opacity: 1;
    }
    .cursorBox .followCursor::before,
    .cursorBox .followCursor:after{
        content: '';
        display: block;
        width: 0px;
        border-top: 10px solid transparent;
        border-bottom: 10px solid transparent;
        position: absolute;
        top:50%;
        margin-top: -10px;
    }
    .cursorBox .followCursor::before{
        border-right: 10px solid #dd0000;
        left: calc(50% - 15px);
    }
    .cursorBox .followCursor::after{
        border-left: 10px solid #dd0000;
        right: calc(50% - 15px);
    }
    footer .palace{
        background: #393;
    }
    footer .contn .details .screen{
        color:#333081
    }
    footer .bg{
        background-image: url(../../img/common/leave1.png);
    }
    